import Vue from 'vue'
import App from './App'
import router from './router'

// 1.导入axios框架
import axios from 'axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

// 2.axios框架的基本使用 axios(config)
// axios是支持promise的，axios()本身会返回一个promise，它在内部拿到数据之后会调用一个内部的resolve()，
// 就会执行then()方法，就可以在then里面处理拿到的数据了
/*axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  methods:'get'
}).then(rel => {
  console.log(rel);
})*/

/*axios({
  url: 'http://123.207.32.32:8000/home/data',
  // 专门针对get请求的参数拼接，params里的数据会拼接到url上发送给服务器
  // 最后的url：'http://123.207.32.32:8000/home/data？type=pop&page=1'
  params: {
    type: 'pop',
    page: 1
  }
}).then((rel) => {
  console.log(rel);
})*/

// 3. 使用全局的axios和对应的配置在进行网络请求，公共的配置写在这里
/*axios.defaults.baseURL='http://123.207.32.32:8000'
// timeout:超时设置  单位毫秒
axios.defaults.timeout=5000*/

// 4.axios发送并发请求
// axios.all([axios({}),axios({})]):当内部的多个网络请求都成功了，
// 就会执行内部的resolve函数，来了then函数来处理两次请求的结果
// 返回的results是一个数组
/*axios.all([axios({
  url:'/home/multidata'
}),axios({
  url:'/home/data',
  params:{
    type:'sell',
    page:5
  }
// 5.axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
})]).then(axios.spread((res1,res2) => {
  console.log(res1);
  console.log(res2);
}))*/

// 6. 通过axios.create({})来创建对应的axios的实例
/*
const instance1 = axios.create({
  baseURL:'http://123.207.32.32:8000',
  timeout: 5000
})
instance1({
  url: '/home/multidata'
}).then(res => {
  console.log(res);
})
instance1({
  url: '/home/data',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})


const instance2 = axios.create({
  baseURL: 'http://222.111.33.33.8000',
  timeout: 10000,
  // headers: {
  //
  // }
})
instance2({
  url: ''
})*/

// 7. 封装request模块
import {request} from "./network/request";

/* 方法一
request({
  url: '/home/multidata'
}, res => {
  console.log(res);
}, err => {
  console.log(err);
})*/


// 方法二
/*
request({
  baseconfig: '/home/multidata',
  success(res){
    console.log(res);
  },
  failure(err){
    console.log(err);
  }
})*/


// 方法三：
/*
request({
  url: '/home/multidata'
})
  .then(res => {
    console.log(res);
  })
  .catch(err => {
  console.log(err);
  })*/


// 最终方案
request({
  url: '/home/multidata'
}).then(res => {
   console.log(res);
}).catch(err => {
    console.log(err);
})